<template>
  <div
    class="algorithmicsorting-box"
    :style="{
      '--height': height,
    }"
  >
    <div
      class="algorithmicsorting"
      v-for="(item, index) in data"
      :key="item.key"
    >
      <div class="padding-box">
        <div class="line-title">
          <!-- <div class="lottie-style" ref="lottieStyle"></div> -->
          <span>{{ item.key }}：</span>

          <span><CountUp :end-val="getNum(item.key)"></CountUp>次</span>
        </div>
        <div
          :style="`height:${itemHeight}`"
          class="item-list-box"
          v-scroll.mouse
        >
          <div
            class="bottom-line"
            v-for="(ai, aiindex) in item.algorithm_name"
            :key="ai.code"
          >
            <div class="icon">
              <img
                :src="requireImgUrl('image', ai.icon)"
                :alt="ai.icon"
                :title="ai.icon"
              />
            </div>
            <div class="progress-container" @click.stop="showModel(ai)">
              <div class="progress-line">
                <div class="topic">{{ ai.name }}</div>
                <div class="progress-text">
                  <div class="text" :style="{ color: ai.color }">未处理：</div>
                  <div class="number">
                    <CountUp :end-val="ai.undo"></CountUp>次
                  </div>
                  <div class="icon">
                    <img
                      :src="requireImgUrl('image', '更多_鼠标悬浮时')"
                      alt="更多"
                      title="更多"
                    />
                  </div>
                </div>
              </div>
              <div class="progress">
                <el-progress
                  :color="ai.color"
                  :stroke-width="10"
                  :percentage="ai.undo"
                  :show-text="false"
                />
              </div>
            </div>
            <div class="text-number">
              <CountUp :end-val="ai.total"></CountUp>次
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, toRefs, onUnmounted } from 'vue';
import { requireImgUrl } from '@/utils/localurl/metaUrl';
import jsonData from './technology.json';
import lottie from 'lottie-web';
import { useAlarmTypeStatisticsStore } from "@/stores/slg/alarmTypeStatistics";
const { setAlarmTypeStatistics, setDialogShow } = useAlarmTypeStatisticsStore();
// 动画dom
const lottieStyle = ref(null);
// 接受数据
const props = defineProps({
  data: {
    type: Array<any>
  },
  height: {
    type: String
  },
  itemHeight: {
    type: String
  },
  showTitle: {
    type: Boolean,
    default: () => true
  }
});
// 结构化数据响应式
const { data, height, showTitle, itemHeight } = toRefs(props);
// 打开模态框
const showModel = (item: any) => {
  setDialogShow(true);
  setAlarmTypeStatistics(item);
  // switch(item.name){
  //   case "可燃气体浓度异常":
  //     item.aiAlarmCountForGrade = [
  //       {
  //         title: '普通',
  //         grade: 'INFO',
  //         number: 10
  //       },
  //       {
  //         title: '告警',
  //         grade: 'WARN',
  //         number: 2
  //       },
  //       {
  //         title: '紧急',
  //         grade: 'ERROR',
  //         number: 5
  //       }
  //     ];
  //     item.data = [
  //       {
  //         equipmentName: '可燃气体报警仪(ZY100-EX)',
  //         resetList: [
  //           {
  //             alertGrade: "INFO",
  //             alertContent: '可燃气体报警',
  //             alertTime: '2024-03-20 11:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "ERROR",
  //             alertContent: '可燃气体报警',
  //             alertTime: '2024-03-20 12:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "WARN",
  //             alertContent: '可燃气体报警',
  //             alertTime: '2024-03-20 13:06',
  //             handleStatus: '0'
  //           }
  //         ]
  //       }
  //     ]
  //     setAlarmTypeStatistics(item);
  //     break;
  //   case "可燃气体浓度严重超标":
  //   item.aiAlarmCountForGrade = [
  //       {
  //         title: '普通',
  //         grade: 'INFO',
  //         number: 10
  //       },
  //       {
  //         title: '告警',
  //         grade: 'WARN',
  //         number: 2
  //       },
  //       {
  //         title: '紧急',
  //         grade: 'ERROR',
  //         number: 5
  //       }
  //     ];
      
  //     item.data = [
  //       {
  //         equipmentName: '可燃气体报警仪(ZY100-EX)',
  //         resetList: [
  //           {
  //             alertGrade: "INFO",
  //             alertContent: '可燃气体报警',
  //             alertTime: '2024-03-20 11:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "ERROR",
  //             alertContent: '可燃气体报警',
  //             alertTime: '2024-03-20 12:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "WARN",
  //             alertContent: '可燃气体报警',
  //             alertTime: '2024-03-20 13:06',
  //             handleStatus: '0'
  //           }
  //         ]
  //       }
  //     ]
  //     setAlarmTypeStatistics(item);
  //     break;
  //   case "四氯化碳浓度异常":
  //    item.aiAlarmCountForGrade = [
  //       {
  //         title: '普通',
  //         grade: 'INFO',
  //         number: 2
  //       },
  //       {
  //         title: '告警',
  //         grade: 'WARN',
  //         number: 3
  //       },
  //       {
  //         title: '紧急',
  //         grade: 'ERROR',
  //         number: 2
  //       }
  //     ];
  //    item.data = [
  //       {
  //         equipmentName: '四氯化碳报警仪(ZY100-CCL4)',
  //         resetList: [
  //           {
  //             alertGrade: "INFO",
  //             alertContent: '四氯化碳报警',
  //             alertTime: '2024-03-20 11:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "ERROR",
  //             alertContent: '四氯化碳报警',
  //             alertTime: '2024-03-20 12:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "WARN",
  //             alertContent: '四氯化碳报警',
  //             alertTime: '2024-03-20 13:06',
  //             handleStatus: '0'
  //           }
  //         ]
  //       }
  //     ]
  //     setAlarmTypeStatistics(item);
  //     break;
  //   case "四氯化碳浓度严重超标":
  //     item.aiAlarmCountForGrade = [
  //       {
  //         title: '普通',
  //         grade: 'INFO',
  //         number: 3
  //       },
  //       {
  //         title: '告警',
  //         grade: 'WARN',
  //         number: 2
  //       },
  //       {
  //         title: '紧急',
  //         grade: 'ERROR',
  //         number: 4
  //       }
  //     ];
  //     item.data = [
  //       {
  //         equipmentName: '四氯化碳报警仪(ZY100-CCL4)',
  //         resetList: [
  //           {
  //             alertGrade: "INFO",
  //             alertContent: '四氯化碳报警',
  //             alertTime: '2024-03-20 11:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "ERROR",
  //             alertContent: '四氯化碳报警',
  //             alertTime: '2024-03-20 12:06',
  //             handleStatus: '0'
  //           },
  //           {
  //             alertGrade: "WARN",
  //             alertContent: '四氯化碳报警',
  //             alertTime: '2024-03-20 13:06',
  //             handleStatus: '0'
  //           }
  //         ]
  //       }
  //     ]
  //     setAlarmTypeStatistics(item);
  //     break;
  //   default:break;   

    
  // }
};
const getNum = (key) => {
  let index = data.value.findIndex(item => item.key == key)
  if (index > -1) {
    return data.value[index].value
  } else {
    return 0
  }
}




// 初始化
onMounted(() => {
  // 加载数据
  nextTick(() => {
    // if (lottieStyle.value) {
    //   lottieStyle.value.forEach(
    //     (item) => {
    //       lottie.loadAnimation({
    //         container: item, // 挂载在某个容器下面
    //         renderer: 'svg',
    //         loop: true,
    //         autoplay: true,
    //         animationData: jsonData,//动画json
    //       });
    //     }
    //   );
    // };
  });
});
onUnmounted(() => {
  setDialogShow(false);
});
</script>
<style lang="scss" scoped>
.item-list-box {
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}
.countup-wrap {
  display: inline;
}
.algorithmicsorting-box {
  width: 100%;
  // 溢出

  .algorithmicsorting {
    width: 100%;
    height: auto;

    .padding-box {
      margin-bottom: clamp(0.625rem, 0.52vw, 1.25rem);

      .line-title {
        width: 100%;
        height: clamp(1.875rem, 1.56vw, 3.75rem);
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: #e2f2ff;
        letter-spacing: 2px;
        font-size: clamp(1rem, 0.83vw, 2rem);
        position: relative;
        display: flex;
        align-items: center;

        .lottie-style {
          width: clamp(1.875rem, 1.56vw, 3.75rem);
          height: 100%;
        }
      }

      .bottom-line {
        width: 100%;
        height: clamp(2.125rem, 1.77vw, 4.25rem);
        display: flex;
        margin-bottom: clamp(0.625rem, 0.52vw, 1.25rem);
        cursor: pointer;

        &:last-child {
          margin-bottom: 0;
        }

        .icon {
          width: 15%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .progress-container {
          width: 70%;
          height: 100%;
          display: flex;
          flex-direction: column;

          .progress-line {
            width: 100%;
            height: 50%;

            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;

            .topic {
              font-size: clamp(0.875rem, 0.73vw, 1.75rem);
              color: rgba(207, 241, 255, 1);
            }

            .progress-text {
              display: flex;
              width: 50%;
              height: 100%;
              align-items: center;
              justify-content: flex-end;

              .text {
                font-size: clamp(0.875rem, 0.73vw, 1.75rem);
              }

              .number {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: clamp(0.875rem, 0.73vw, 1.75rem);
              }

              .icon {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 1px;
              }
            }
          }

          .progress {
            width: 100%;
            height: 50%;
            padding-top: clamp(0.188rem, 0.16vw, 0.375rem);
            box-sizing: border-box;

            :deep(.el-progress-bar__outer) {
              border-radius: 0;
            }

            :deep(.el-progress-bar__inner) {
              border-radius: 0;
            }
          }
        }

        .text-number {
          width: 15%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: clamp(1rem, 0.83vw, 2rem);
          color: white;
        }
      }
    }
  }
}
</style>
